<script setup>
import { ref } from 'vue';

const modalDrawerOpen = ref(false);
const nonModalDrawerOpen = ref(false);
const inlineDrawerOpen = ref(false);
const endDrawerOpen = ref(false);
const smallDrawerOpen = ref(false);
const largeDrawerOpen = ref(false);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Drawer Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      <!-- Modal Drawer -->
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Modal Drawer</h3>
        <p class="mb-4 text-sm text-gray-600">
          Blocks interaction with the page until dismissed
        </p>
        <Button @click="modalDrawerOpen = true"> Open Modal Drawer </Button>

        <Drawer
          v-model="modalDrawerOpen"
          type="modal"
          position="start"
          size="medium"
          aria-labelledby="modal-drawer-title"
        >
          <div class="p-6">
            <h2 id="modal-drawer-title" class="mb-4 text-lg font-semibold">
              Modal Drawer
            </h2>
            <p class="mb-4">
              This is a modal drawer that slides in from the start position. It
              blocks interaction with the page content.
            </p>
            <div class="space-y-2">
              <p><strong>Type:</strong> Modal</p>
              <p><strong>Position:</strong> Start</p>
              <p><strong>Size:</strong> Medium</p>
            </div>
            <div class="mt-6 flex justify-end">
              <Button @click="modalDrawerOpen = false"> Close </Button>
            </div>
          </div>
        </Drawer>
      </div>

      <!-- Non-Modal Drawer -->
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Non-Modal Drawer</h3>
        <p class="mb-4 text-sm text-gray-600">
          Allows interaction with the page while open
        </p>
        <Button @click="nonModalDrawerOpen = true">
          Open Non-Modal Drawer
        </Button>

        <Drawer
          v-model="nonModalDrawerOpen"
          type="non-modal"
          position="start"
          size="medium"
          aria-labelledby="non-modal-drawer-title"
        >
          <div class="p-6">
            <h2 id="non-modal-drawer-title" class="mb-4 text-lg font-semibold">
              Non-Modal Drawer
            </h2>
            <p class="mb-4">
              This is a non-modal drawer that allows you to interact with the
              page content while it's open.
            </p>
            <div class="space-y-2">
              <p><strong>Type:</strong> Non-Modal</p>
              <p><strong>Position:</strong> Start</p>
              <p><strong>Size:</strong> Medium</p>
            </div>
            <div class="mt-6 flex justify-end">
              <Button @click="nonModalDrawerOpen = false"> Close </Button>
            </div>
          </div>
        </Drawer>
      </div>

      <!-- Inline Drawer -->
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Inline Drawer</h3>
        <p class="mb-4 text-sm text-gray-600">Inline drawer without overlay</p>
        <Button @click="inlineDrawerOpen = true"> Open Inline Drawer </Button>

        <Drawer
          v-model="inlineDrawerOpen"
          type="inline"
          position="start"
          size="medium"
          aria-labelledby="inline-drawer-title"
        >
          <div class="p-6">
            <h2 id="inline-drawer-title" class="mb-4 text-lg font-semibold">
              Inline Drawer
            </h2>
            <p class="mb-4">
              This is an inline drawer that doesn't have an overlay background.
            </p>
            <div class="space-y-2">
              <p><strong>Type:</strong> Inline</p>
              <p><strong>Position:</strong> Start</p>
              <p><strong>Size:</strong> Medium</p>
            </div>
            <div class="mt-6 flex justify-end">
              <Button @click="inlineDrawerOpen = false"> Close </Button>
            </div>
          </div>
        </Drawer>
      </div>

      <!-- End Position Drawer -->
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">End Position Drawer</h3>
        <p class="mb-4 text-sm text-gray-600">
          Drawer slides in from the end (right)
        </p>
        <Button @click="endDrawerOpen = true"> Open End Drawer </Button>

        <Drawer
          v-model="endDrawerOpen"
          type="modal"
          position="end"
          size="medium"
          aria-labelledby="end-drawer-title"
        >
          <div class="p-6">
            <h2 id="end-drawer-title" class="mb-4 text-lg font-semibold">
              End Position Drawer
            </h2>
            <p class="mb-4">
              This drawer slides in from the end position (right side).
            </p>
            <div class="space-y-2">
              <p><strong>Type:</strong> Modal</p>
              <p><strong>Position:</strong> End</p>
              <p><strong>Size:</strong> Medium</p>
            </div>
            <div class="mt-6 flex justify-end">
              <Button @click="endDrawerOpen = false"> Close </Button>
            </div>
          </div>
        </Drawer>
      </div>

      <!-- Small Size Drawer -->
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Small Size Drawer</h3>
        <p class="mb-4 text-sm text-gray-600">
          Narrow drawer for minimal content
        </p>
        <Button @click="smallDrawerOpen = true"> Open Small Drawer </Button>

        <Drawer
          v-model="smallDrawerOpen"
          type="modal"
          position="start"
          size="small"
          aria-labelledby="small-drawer-title"
        >
          <div class="p-6">
            <h2 id="small-drawer-title" class="mb-4 text-lg font-semibold">
              Small Drawer
            </h2>
            <p class="mb-4">This is a small-sized drawer with limited width.</p>
            <div class="space-y-2">
              <p><strong>Size:</strong> Small</p>
            </div>
            <div class="mt-6 flex justify-end">
              <Button @click="smallDrawerOpen = false"> Close </Button>
            </div>
          </div>
        </Drawer>
      </div>

      <!-- Large Size Drawer -->
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Large Size Drawer</h3>
        <p class="mb-4 text-sm text-gray-600">
          Wide drawer for extensive content
        </p>
        <Button @click="largeDrawerOpen = true"> Open Large Drawer </Button>

        <Drawer
          v-model="largeDrawerOpen"
          type="modal"
          position="start"
          size="large"
          aria-labelledby="large-drawer-title"
        >
          <div class="p-6">
            <h2 id="large-drawer-title" class="mb-4 text-lg font-semibold">
              Large Drawer
            </h2>
            <p class="mb-4">
              This is a large-sized drawer with expanded width for more content.
            </p>
            <div class="space-y-2">
              <p><strong>Size:</strong> Large</p>
            </div>
            <div class="mt-6 flex justify-end">
              <Button @click="largeDrawerOpen = false"> Close </Button>
            </div>
          </div>
        </Drawer>
      </div>
    </div>

    <!-- Advanced Example with DrawerBody -->
    <div class="mt-8 rounded-md border p-4">
      <h3 class="mb-2 font-medium">Advanced Drawer with Rich Content</h3>
      <p class="mb-4 text-sm text-gray-600">
        Example showing complex drawer content with navigation
      </p>

      <div class="space-y-4">
        <Button @click="modalDrawerOpen = true">
          Open Navigation Drawer
        </Button>

        <!-- Display current state -->
        <div class="rounded bg-gray-50 p-3 text-sm">
          <p>
            <strong>Current State:</strong>
            {{ modalDrawerOpen ? 'Open' : 'Closed' }}
          </p>
        </div>
      </div>
    </div>

    <!-- API Information -->
    <div class="mt-8 rounded-md border border-blue-200 bg-blue-50 p-4">
      <h3 class="mb-2 font-medium text-blue-800">Component API</h3>
      <div class="text-sm text-blue-700">
        <p class="mb-2"><strong>Props:</strong></p>
        <ul class="mb-4 ml-4 list-disc space-y-1">
          <li><code>type</code>: 'modal' | 'non-modal' | 'inline' | 'alert'</li>
          <li><code>position</code>: 'start' | 'end'</li>
          <li><code>size</code>: 'small' | 'medium' | 'large'</li>
          <li><code>modelValue</code>: boolean (v-model support)</li>
          <li><code>ariaLabelledby</code>: string</li>
          <li><code>ariaDescribedby</code>: string</li>
        </ul>
        <p class="mb-2"><strong>Events:</strong></p>
        <ul class="mb-4 ml-4 list-disc space-y-1">
          <li><code>@beforetoggle</code>: Emitted before state changes</li>
          <li><code>@toggle</code>: Emitted after state changes</li>
          <li><code>@update:modelValue</code>: For v-model binding</li>
        </ul>
        <p class="mb-2"><strong>Methods:</strong></p>
        <ul class="ml-4 list-disc space-y-1">
          <li><code>show()</code>: Programmatically show the drawer</li>
          <li><code>hide()</code>: Programmatically hide the drawer</li>
        </ul>
      </div>
    </div>
  </div>
</template>
